<template>
    <div class="box">
        <mt-header fixed title="产品" ></mt-header>
       <ul class="list">
           <li v-for="item in products" class="item">
               <router-link to="/projectdetal">
                    <img :src="'http://localhost:3000/'+item.pic[0].filename" alt="" width="100%" height="100px">
               </router-link>
               <p class="productName">{{item.name}}</p>
               <p v-html="item.description" class="productDescript"></p>
               <p><span class="price">￥{{item.price}} </span><span class="NumComment">{{item.commentCount}}人评论</span></p>
           </li>
       </ul>
    </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex';
export default {
  data(){
      return{
          
      }
  },
  computed:{
      ...mapGetters(['products']),
  },
  methods:{
      ...mapActions(['checkProducts']),
  },
  created(){
      this.checkProducts();
      console.log( this.products);
  }
}
</script>

<style>
.box{
    width: 100%;
    background:Gainsboro  ;
}
    .list{
        width: 100%;
        margin-top:40px;
        list-style: none;
        overflow: hidden;
        padding-bottom:55px;
    }
    .item{
        width:48%;
        float: left;
      margin-bottom: 10px;
      background-color: white;
    }
    .item:nth-of-type(2n+1){
        margin-right: 2%;
    }
    .item:nth-of-type(2n){
          margin-left:2%;
    }
    .productName{
        font-weight: 900;
        font-size:14px;
        text-indent:2px;
    }
    .productDescript{
        padding: 3px;
        font-size:12px;
        color: #444;
    }
    .price{
        color: red;
        font-size: 12px;
    }
    .NumComment{
        float: right;
        font-size: 12px;
        color: #ccc;
    }
</style>
